<template>
  <div>
    <common-head :title="$route.name" />
    <div class="wrap">
      <div class="sort-wrap">
        <div
          @click="orderBy('sale')"
          :class="['sort', 'sale', { active: order.orderBy === 'sale' }]"
        >
          销量
        </div>
        <div
          @click="orderByPrice"
          :class="['sort', 'price', { active: order.orderBy === 'price' }]"
        >
          <span>价格</span>
          <div
            :class="[
              'angle',
              'up',
              {
                active: order.orderBy === 'price' && order.updown === 0,
              },
            ]"
          ></div>
          <div
            :class="[
              'angle',
              'down',
              {
                active: order.orderBy === 'price' && order.updown === 1,
              },
            ]"
          ></div>
        </div>
        <div
          @click="orderBy('new')"
          :class="['sort', 'new', { active: order.orderBy === 'new' }]"
        >
          新品
        </div>
      </div>
      <div class="items-wrap">
        <div
          class="item"
          @click="clickItem(item.id)"
          v-for="item in items"
          :key="item.name"
        >
          <img :src="item.pic" alt="" class="item-img" />
          <div class="item-info">
            <h5 class="item-name">
              {{ item.name }}
            </h5>
            <p class="item-desc">
              {{ item.characteristic ? item.characteristic : "暂无描述" }}
            </p>
            <div class="item-buy">
              <p class="price">￥{{ item.minPrice }}</p>
              <van-icon
                name="gouwuche"
                size="20"
                color="#ff734c"
                class-prefix="icon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItems } from '_api'
export default {
  data () {
    return {
      order: {
        orderBy: 'sale', // 按照什么排序 sale price 价格 new 新品排序
        updown: 0 // 0升序 1 降序
      },
      items: [] // 商品列表
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    clickItem (id) {
      // 进入详情页
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    fetchItems () {
      fetchItems({
        k: this.$route.query.word,
        orderBy: this._orderBy
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    orderBy (order) {
      // 点击按照销量 或者 新品排序
      this.order.orderBy = order
      this.fetchItems()
    },
    orderByPrice () {
      /*
       1 此时是按照销量 或者 新品排序 点击 默认按照价格降序排序
       2 此时就是按照价格排序 点击 切换 升序还是降序
      */
      if (this.order.orderBy !== 'price') {
        // 按照销量或者新品牌排序
        this.order.orderBy = 'price'
        this.order.updown = 1
      } else {
        if (this.order.updown === 0) {
          this.order.updown = 1
        } else {
          this.order.updown = 0
        }
      }
      this.fetchItems()
    }
  },
  computed: {
    _orderBy () {
      let orderBy = 'sale'
      switch (this.order.orderBy) {
        case 'sale':
          orderBy = 'ordersDown'
          break
        case 'price':
          if (this.order.updown === 0) {
            // 价格升序
            orderBy = 'priceUp'
          } else {
            orderBy = 'priceDown'
          }
          break
        case 'new':
          orderBy = 'addedDown'
          break
        default:
          break
      }
      return orderBy
    }
  },
  components: { CommonHead }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 46px;
  .sort-wrap {
    height: 40px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .sort {
      &.active {
        color: #ff734c;
      }
      &.price {
        position: relative;
        .angle {
          width: 0;
          height: 0;
          border: 6px solid transparent;
          position: absolute;
          right: -14px;
          &.up {
            border-bottom-color: #333;
            top: -2px;
            &.active {
              border-bottom-color: #ff734c;
            }
          }
          &.down {
            border-top-color: #333;
            top: 11px;
            &.active {
              border-top-color: #ff734c;
            }
          }
        }
      }
    }
  }
  .item{
    display: flex;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    .item-img{
      width: 160px;
    }
    .item-info{
      flex: 1;
      padding: 0 10px;
      .item-name{
        font-size: 16px;
        margin-top: 8px;
        color: #333;
      }
      .item-desc{
        width: 200px;
        font-size: 14px;
        line-height: 18px;
        margin: 10px 0;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .item-buy{
        display: flex;
        justify-content: space-between;
        .price{
          font-size: 20px;
          color: #ff734c;
        }
      }
    }
  }
}
</style>
